<script setup>
import {ref} from "vue";
import {get} from "../../util/request.js";
import {showToast} from "vant";
import {useRoute} from "vue-router";

const show = ref(false)

const listings = ref({
  title: "保利东湾 工作调整继续转租 合同今年7月份到期",
  type:"整租",
  pay: "押一付一",
  houseType: "三室一厅",
  area: "80㎡",
  price: "5000",
  address: "北京市东城区东直门",
  floor: "5楼",
  orientation: "朝南",
  residenceType: "普通住宅",
  interiorFinish: "精装",
  waterAndElectricity:"普通民用",
})

const xiaoqv = ref({
  title: "保利东湾小区",
  wuye:"上海万科物业",
  ruzhulv: "86%",
})

const user = ref({
  xingsheng:"我真的很喜欢这个小窝很温馨，我每天都会打扫的干干净净的，如果不是因为工作的原因肯定不会出手转租的...",
  nickname:"万物酱"
})

const houseImage = ref([
    {imagesUrl:"https://img.yzcdn.cn/vant/cat.jpeg"},
    {imagesUrl:"https://img.yzcdn.cn/vant/cat.jpeg"},
    {imagesUrl:"https://img.yzcdn.cn/vant/cat.jpeg"},
    {imagesUrl:"https://img.yzcdn.cn/vant/cat.jpeg"},
])

const amenitiesValueList = ref([])
const amenitiesNameList = ref(["床","洗衣机","空调","阳台","冰箱","卫生间","可做饭","电视","热水器","宽带","沙发","暖气","衣柜"])
const amenitiesList = ref([])
get("amenities/listByListingId",{//房源配置
  listingId:useRoute().query.id,
}).then(res => {
  if (res.code === 0){
    for (let i = 0; i < res.data.length; i++) {
      amenitiesValueList.value.push(res.data[i].amenityName)
    }
    amenitiesList.value = res.data;
  } else {
    showToast(res.data);
  }}).catch(()=>{
  showToast("网络错误")
})


const HTtime = ref(3)

const onClickLeft = () => {
  history.back()
}//导航栏返回上一个页面

const listingsNew = ref([])

get("listings/selectByCityAll",{//同小区房源
  pagSize:10,
  pagNum:1,
  orderByAsc:"created_at",
  location:"保利东湾小区"
}).then(res => {
  if (res.code === 0){
    listingsNew.value = res.data;
  } else {
    showToast(res.data);
  }}).catch(()=>{
  showToast("网络错误")
})

get("listings/info",{//房源详情
  listingId:useRoute().query.id,
}).then(res => {
  if (res.code === 0){
    listings.value = res.data;
  } else {
    showToast(res.data);
  }}).catch(()=>{
  showToast("网络错误")
})

get("images/listingsImage",{//房源图片
  listingId:useRoute().query.id,
}).then(res => {
  if (res.code === 0){
    houseImage.value = res.data;
  } else {
    showToast(res.data);
  }}).catch(()=>{
  showToast("图片加载失败")
})

const onClick = () => {
  get("user/listingUser",{userId:listings.value.userId}).then(res => {
    if (res.code === 0){
      user.value = res.data
      show.value = true
    } else {
      showToast(res.data);
    }}).catch(()=>{
    showToast("网络错误")
    }
  )
};

const shouchangzhuangtai = ref(false)

const findCollect = () => {
  get("my/collect/find",{//收藏状态
    listingId:useRoute().query.id,
  }).then(res => {
    shouchangzhuangtai.value = res.code === 0;
  })
}
findCollect()

const onClickShouCang = () => {
  if (!shouchangzhuangtai.value){
    get("my/collect/add",listings.value).then(res => {
      if (res.code === 0){
        shouchangzhuangtai.value = true
      } else {
        showToast(res.data);
      }}).catch(()=>{
      showToast("网络错误")
    })
  } else {
  }
}
</script>

<template>
  <van-dialog v-model:show="show" :title="user.name" show-cancel-button :showConfirmButton="false" :showCancelButton="false">
    <template #title>
      <div style="position: relative;">
        <van-image width="50px" radius="50%" height="50" :src="user.avatar" fit="cover" />
        <van-icon style="position:absolute;left: 20px" size="30" name="warning-o" @click="$router.push({path:'reportAdd',query:user})"/>
        <van-icon style="position:absolute;right: 20px;" size="30" name="close" @click="show = false"/>
      </div>
      <div>
        {{user.nickname}}
      </div>
    </template>
    <van-row style="text-align: left">
      <p style="margin-left: 15%">他的心声:</p>
    </van-row>
    <van-row style="margin-top: -15px" justify="space-around">
      <van-col span="4"/>
      <van-col span="16">
        <van-text-ellipsis style="text-align: left;" :content="user.xingsheng" rows="3"/>
      </van-col>
      <van-col span="4"/>
    </van-row>
    <van-row justify="space-around" style="margin-top: 30px;margin-bottom: 20px">
      <van-col span="8">
        <van-button type="default" style="width: 100%;">微信/电话</van-button>
      </van-col>
      <van-col span="8">
        <van-button type="default" style="width: 100%;">私信</van-button>
      </van-col>
    </van-row>
    <div>

    </div>
  </van-dialog>


<!--  悬浮球-->
    <van-floating-bubble class="custom-float-bubble" axis="xy" magnetic="x" :offset="{y:400}" @click="onClick" >
      <div style="width: 60px;height: 60px;background-color: #ffffff;display: grid; place-items: center;">
        <van-image width="50px" height="50" src="http://60.205.91.67:9001/tubiao/t01fab3a02a04b699eb.jpg"/>
      </div>
    </van-floating-bubble>

<!--  头标签-->
  <div style="width: 100vw;height: 46px">
    <van-nav-bar
        title="房源详情"
        left-text="返回"
        left-arrow
        style="
        position: fixed;
        top:0;
        width: 100vw;
        "
        @click-left="onClickLeft"
    >
      <template #right>
        <van-icon @click="onClickShouCang()" v-if="!shouchangzhuangtai" size="20" color="black" name="star-o" />
        <van-icon @click="onClickShouCang()" v-if="shouchangzhuangtai" size="20" color="red" name="star" />
      </template>
    </van-nav-bar>
  </div>
  <div style="width: 100vw;">
<!--    房源图片-->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in houseImage">
        <van-image
            width="100%"
            height="100%"
            :src="item.imageUrl"
            fit="cover"
        />
      </van-swipe-item>
    </van-swipe>
    <van-cell title-style="text-align:left; font-size: 20px">
      <template #title>
        {{listings.title}}
      </template>
    </van-cell>
    <van-cell
        @click="$router.push({path:'/contract'})"
        center
        is-link
        title-style="text-align:left"
        :title= "listings.pay === '' || listings.pay === null ? listings.price + '元/月(暂无)' : listings.price + '元/月 (' + listings.pay + ')'"
        value="内容" size="large"
        :label="'合同剩余' + HTtime + '个月'"
        >
      <template #value>
        <div style="position:relative;height: 50px">
          <van-image radius="5" width="50px" height="50px" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
          <p class="hetong">合同</p>
        </div>
      </template>
    </van-cell>

<!--    基本信息-->
    <van-cell title="基本信息" :border="false" title-style="text-align: left"/>
    <van-row justify="center">
      <van-col span="12" style="text-align: left;">
        户型：{{listings.houseType}}（{{listings.type}}）
      </van-col>
      <van-col span="10" style="text-align: left;">
        朝向：{{listings.orientation}}
      </van-col>
    </van-row>
    <van-row justify="center">
      <van-col span="11" style="text-align: left;">
        面积：{{listings.area}}
      </van-col>
      <van-col offset="1" span="10" style="text-align: left;">
        类型：{{listings.houseType}}
      </van-col>
    </van-row>
    <van-row justify="center">
      <van-col span="11" style="text-align: left;">
        楼层：{{listings.floor}}
      </van-col>
      <van-col offset="1" span="10" style="text-align: left;">
        水电：{{listings.waterAndElectricity}}
      </van-col>
    </van-row>
    <van-row>
      <van-col offset="1" span="11" style="text-align: left;">
        装修：{{listings.interiorFinish}}
      </van-col>
    </van-row>

<!--    房间配套-->
    <van-cell title="房间配套" title-style="text-align: left"/>
    <van-checkbox-group class="checkbox-grid" v-model="amenitiesValueList" shape="square">
      <div class="checkbox-with-text" v-for="item in amenitiesNameList">
        <van-checkbox disabled class="grid-item" style="width: 30px;" :name="item" checked-color="rgb(174, 191, 207)"></van-checkbox>
        <div class="checkbox-label">{{item}}</div>
      </div>
    </van-checkbox-group>

    <van-cell title="小区及周边" title-style="text-align: left" value="小区航拍"/>
    <van-row justify="space-around">
      <van-col span="5" style="text-align: left;">
        <van-image height="72" width="100%" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
      </van-col>
      <van-col span="10" style="text-align: left;">
        {{xiaoqv.title}}
        <div>物业：{{xiaoqv.wuye}}</div>
        <div>房屋入住率：{{xiaoqv.ruzhulv}}</div>
      </van-col>
      <van-col span="5" style="text-align: left;">
        <div style="width: 100%;height: 100%; position:relative;">
          <p style="position: absolute;bottom: 0px">查看详情></p>
        </div>
      </van-col>
    </van-row>
    <div>
      <van-image style="margin: auto" height="200" width="95%" src="http://60.205.91.67:9001/image/t04cc8b1669116b570a.png"/>
    </div>
    <van-cell title="同小区房源" title-style="text-align: left"/>
    <div style="display: flex;overflow-x: auto;">
      <span v-for="item in listingsNew" style="font-size:14px ; margin-left: 10px; text-align: left" @click="()=>{$router.push({path:'/houseInfo',query:{id:item.id}})}">
          <van-image :radius="5" style="width: 120px;height: 100px" :src="item.cover"/><br>
          {{item.houseType}}-{{item.title}}<br>
          {{item.price}}元/月起
      </span>
    </div>
  </div>
</template>

<style scoped>


.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 220px;
  text-align: center;
  background-color: #39a9ed;
}

.hetong{
  position: absolute;
  width: 50px;
  text-align:center;
  bottom: 0;
  right: 0;
  margin-right: 0;
  background-color: rgba(89,89,89,0.55);
  color: white;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-bottom: 0px;
}

.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  align-items: center; /* 垂直居中对齐整个网格项 */
  margin-left: 20px;
  margin-top: 10px;
}

.checkbox-with-text {
  width: 83px;
  display: flex;
  align-items: center;
  margin-bottom: 5px; /* 根据需要调整间距 */
}

.checkbox-label {
  margin-left: 5px; /* 调整文本与复选框之间的间距 */
}



</style>
